<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
    <script>
        // 检验函数
        function checkMe(){
            // 校验通过，返回true
            // 校验失败，返回false，阻止浏览器继续向服务器提交保单

            // 验证提示信息字符串变量
            var strMsg = "";

            // 验证用户名
            // 获取用户名标签控件
            var userName = document.getElementById("userName");
            // 获取用户标签控件的value属性值，如果是双标签则获取innerHTML
            var strUserName = userName.value;
            // 做非空验证
            if(strUserName == ""){
                strMsg+="请输入用户名!\n";
            }

            // 密码非空验证
            var struserPsw = document.getElementById("userPsw").value;
            // 做非空验证
            if(struserPsw == ""){
                strMsg+="请输入密码!\n";
            }
            // 邮箱非空验证
            var struserEmail = document.getElementById("userEmail").value;
            // 做非空验证
            if(struserEmail == ""){
                strMsg+="请输入邮箱!\n";
            }
            // 邮箱格式验证

            /*/^1[3-9]\d{9}$/

            /^130$/   130岁
            /^1[0-2]\d$/  100-129岁
            /^[1-9]?\d$/  0-99岁

            /^130$|^((1[0-2]|[1-9])?\d)$/

            /^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/

            */
            // 定义个月正则表达式的对象
            var regEmail = /^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/;
            if(struserEmail != "" && regEmail.test(struserEmail) == false){
                strMsg+="邮箱格式不合法，请重新输入!\n";
            }


            // 性别验证
            // 因为性别是一组单选框标签，需要for循环逐个进行检测
            // 获取这一组单选框对象，是一个数组结果
            var userSexRadios = document.getElementsByName("userSex");
            // 默认假设是没有选中状态
            var isRadioChecked = false;
            // 使用for循环边逐个进行检查
            for(var i =0;i<userSexRadios.length;i++){
                if(userSexRadios[i].checked){
                    // 表示有一个进行选择
                    // 找打了选中项，可以终止循环了
                    isRadioChecked = true;
                    break;
                }
            }
            // 根据选中标识变量判定是否选择了这一组单选框
            if(isRadioChecked == false){
                // 没有选择，提示错误信息
                strMsg+="请选择性别!\n";
            }

            // 出生年月验证
            var userBirthYear = document.getElementById("userBirthYear").selectedIndex;
            // 做非空验证
            if(userBirthYear == 0){
                strMsg+="请选择出生年份!\n";
            }

            // 出生年月验证
            var userBirthMoth = document.getElementById("userBirthMoth").selectedIndex;
            // 做非空验证
            if(userBirthMoth == 0){
                strMsg+="请选择出生月份!\n";
            }

            // 兴趣验证
            // 因为兴趣是一组同名的多选框标签，需要for循环逐个进行检测
            // 获取这一组单选框对象，是一个数组结果
            var userHobbys = document.getElementsByName("userHobby");
            // 假设默认选中的个数是0
            var checkboxCount = 0;
            // 使用for循环边逐个进行检查
            for(var i =0;i<userHobbys.length;i++){
                if(userHobbys[i].checked){
                    // 选中统计个数+1
                    checkboxCount++;
                }
            }
            // 根据选中个数判定是否满足要求
            if(checkboxCount <= 1){
                // 没有选择，提示错误信息
                strMsg+="兴趣爱好至少选择2项!\n";
            }

            // 个人简介非空验证
            var userIntroduction = document.getElementById("userIntroduction").value.trim();
            console.info(document.getElementById("userIntroduction").value);
            // 做非空验证
            if(userIntroduction == ""){
                strMsg+="请输入个人简介!\n";
            }

            // 根据验证提示信息变量的值是否为空，决定是提交表单还是阻止表单提交
            if(strMsg == ""){
                // 没有提示信息，验证通过
                return true;
            }else{
                // 提示错误信息
                alert(strMsg);
                return false;
            }
        }
    </script>
</head>
<body>
<form action="#" method="get">
    <table border="1px" cellspacing="0px" cellpadding="5px" width="800px" align="center">
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="userName" id="userName"></td>
            <td>登录用户名</td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" name="userPsw" id="userPsw"></td>
            <td>输入密码</td>
        </tr>
        <tr>
            <td>注册邮箱:</td>
            <td><input type="text" name="userEmail" id="userEmail"></td>
            <td>注意邮箱格式的正确性</td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="userSex" id="userSex" value="male"/>男
                <input type="radio" name="userSex" id="userSex2" value="female"/> 女
            </td>
            <td>选择性别</td>
        </tr>

        <tr>
            <td>出生年月:</td>
            <td>
                <select name="userBirthYear" id="userBirthYear">
                    <option></option>
                    <option value="1990">1990</option>
                    <option value="1991">1991</option>
                    <option value="1992">1992</option>
                    <option value="1993">1993</option>
                </select>
                <select name="userBirthMoth" id="userBirthMoth">
                    <option></option>
                    <option value="1">1月</option>
                    <option value="2">2月</option>
                    <option value="3">3月</option>
                    <option value="4">4月</option>
                    <option value="5">5月</option>
                    <option value="6">6月</option>
                    <option value="7">7月</option>
                    <option value="8">8月</option>
                    <option value="9">9月</option>
                    <option value="10">10月</option>
                    <option value="11">11月</option>
                    <option value="12">12月</option>
                </select>
            </td>
            <td>选择出生年月</td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td>
                <input type="checkbox" name="userHobby" id="userHobby1">游戏
                <input type="checkbox" name="userHobby" id="userHobby2">还是游戏
                <input type="checkbox" name="userHobby" id="userHobby3">还是还是游戏
                <input type="checkbox" name="userHobby" id="userHobby4">还是还是还是游戏
            </td>
            <td>选择兴趣</td>
        </tr>
        <tr>
            <td>头像:</td>
            <td><input type="file" name="userImg" id="userImg"></td>
            <td>上传头像</td>
        </tr>
        <tr>
            <td>个人简介:</td>
            <td>
            <textarea name="userIntroduction" id="userIntroduction" rows="3" cols="20">

            </textarea>
            </td>
            <td>输入个人介绍</td>
        </tr>
        <tr>
            <td>
                <input type="submit" name="submitMe" value="提交" onclick="return checkMe();">
            </td>
            <td>
                <input type="reset" name="resetMe" value="重置">
            </td>
        </tr>

    </table>
</form>
</body>
</html>